<template>


      <!-- 主体数据 -->
      <div style="flex: 1;background-color: white;padding: 5px;">
        <el-divider content-position="left"><h3>个人信息</h3></el-divider>





        <div style="display: flex; align-items: center;margin-bottom: 20px">
          <!-- 用户头像 -->
          <el-avatar :size="100" :src="user.avatar" style="margin-right: 20px;">
<!--            这是头像里面表示可以上传头像-->
            <el-button type="text" @click="dialogVisible = true">点击上传</el-button>

            <el-dialog
                title="请选择上传图片"
                :visible.sync="dialogVisible"
                width="30%"
                :before-close="handleClose">
              <el-upload
                  class="avatar-uploader"
                  action="https://jsonplaceholder.typicode.com/posts/"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload">
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
              <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
            </el-dialog>

          </el-avatar>
          <!-- 用户基本信息 -->
          <div style="width: 30%;float: left;margin-right: 10%;">
            <div style="display: flex; align-items: center; margin-bottom: 10px;">
              <span style="font-weight: bold; margin-right: 10px;">学号(教工号):</span>
              <el-input v-model="user.userId" disabled style="max-width: 70%"></el-input>
            </div>
            <div style="display: flex; align-items: center; margin-bottom: 10px">
              <span style="font-weight: bold; margin-right: 10px;">所属学院:</span>
              <el-input v-model="user.college" disabled style="max-width: 70%;margin-left: 30px"></el-input>
            </div>
            <div style="display: flex; align-items: center;margin-bottom: 10px">
              <span style="font-weight: bold; margin-right: 10px;">姓名:</span>
              <el-input v-model="user.name" disabled style="max-width: 70%;margin-left: 60px"></el-input>
            </div>
            <div style="display: flex; align-items: center; margin-bottom: 10px">
              <span style="font-weight: bold; margin-right: 10px;">性别:</span>
              <el-radio-group v-model="user.gender" disabled style="margin-left: 60px">
                <el-radio label="male">男</el-radio>
                <el-radio label="female">女</el-radio>
              </el-radio-group>
            </div>
            <div style="display: flex; align-items: center; margin-bottom: 10px;">
              <span style="font-weight: bold; margin-right: 40px;">所属专业:</span>
              <el-input v-model="user.major" disabled style="max-width: 70%"></el-input>
            </div>

          </div>


          <div style="width: 30%;float: left;margin-right:20%;margin-top: -2px">

            <div style="display: flex; align-items: center; margin-bottom: 10px">
              <span style="font-weight: bold; margin-right: 10px;">所属班级:</span>
              <el-input v-model="user.className" disabled style="max-width: 70%;margin-left: 30px"></el-input>
            </div>
            <div style="display: flex; align-items: center; margin-bottom: 10px" >
              <span style="font-weight: bold; margin-right: 10px;">联系电话:</span>
              <el-input v-model="user.phone" disabled style="max-width: 70%;margin-left: 30px" ></el-input>
            </div>
            <div style="display: flex; align-items: center; margin-bottom: 10px;">
              <span style="font-weight: bold; margin-right: 10px;">电子邮箱:</span>
              <el-input v-model="user.email" disabled style="max-width: 70%;margin-left: 30px"></el-input>
            </div>
            <div style="display: flex; align-items: center;margin-bottom: 10px">
              <span style="font-weight: bold; margin-right: 10px;">密码:</span>
              <el-input type="password" v-model="user.password" disabled style="max-width: 70%;margin-left: 60px"></el-input>
            </div>

<!--            编辑用户信息在这里-->
            <el-button type="primary" @click="editorOpen" style="position: relative;top: -5px;">编辑</el-button>
            <el-dialog
                title="个人信息编辑"
                :visible.sync="editor"
                width="70%"
                height="auto"
                :before-close="editorClose">


              <div class="all-container" style="display: flex;">
<!--              左边内容-->
                <div style="width: 30%;">
                  <el-form :model="user" :rules="rules" ref="personForm">
                    <el-form-item label="所属学院" prop="college">
                      <div style="display: flex; align-items: center; margin-bottom: 10px">
                      <el-input v-model="user.college" :disabled="isdisabled"  style="max-width: 70%;margin-left: 30px"></el-input>
                      </div>
                    </el-form-item>

<!--                    <span style="font-weight: bold; margin-right: 10px;">所属学院:</span>-->
                    <el-form-item label="姓名" prop="name">
                      <div style="display: flex; align-items: center;">
                        <el-input v-model="user.name" :disabled="isdisabled"  style="max-width: 60%;margin-left: 60px"></el-input>
                      </div>
                    </el-form-item>


                    <el-form-item label="性别" prop="gender">
                    <el-radio-group v-model="user.gender" :disabled="isdisabled" style="margin-left: 60px">
                      <el-radio label="male">男</el-radio>
                      <el-radio label="female">女</el-radio>
                    </el-radio-group>
                    </el-form-item>

                    <el-form-item label="联系电话" prop="phone">
                      <div style="display: flex; align-items: center; margin-bottom: 10px" >
                        <el-input v-model="user.phone" :disabled="isdisabled" style="max-width: 70%;margin-left: 30px" ></el-input>
                      </div>
                    </el-form-item>





                  </el-form>
                </div>

<!--                右边内容-->

                <div style="width: 30%;margin-top: -2px;margin-left: 20%">
                  <el-form :model="user" :rules="rules" ref="personForm">
                    <el-form-item label="电子邮箱" prop="email">
                      <div style="display: flex; align-items: center; margin-bottom: 10px;">
                        <el-input v-model="user.email" :disabled="isdisabled" style="max-width: 70%;margin-left: 30px"></el-input>
                      </div>
                    </el-form-item>

                    <el-form-item label="所属专业" prop="major">
                      <div style="display: flex; align-items: center; margin-bottom: 10px;">
                        <el-tooltip effect="dark" content="没有可填无！" placement="top-start">
                          <el-input v-model="user.major" :disabled="isdisabled" style="max-width: 70%;margin-left: 30px"></el-input>
                        </el-tooltip>
                      </div>
                    </el-form-item>

                    <el-form-item label="所属班级" prop="className">
                      <div style="display: flex; align-items: center; margin-bottom: 10px">
                        <el-tooltip effect="dark" content="没有可填无！" placement="top-start">
                          <el-input v-model="user.className" :disabled="isdisabled" style="max-width: 70%;margin-left: 30px"></el-input>
                        </el-tooltip>
                      </div>
                    </el-form-item>
                  </el-form>
                </div>
              </div>

              <span slot="footer" class="dialog-footer">
                  <el-button @click="handleCancel">取 消</el-button>
                  <el-button type="primary" @click="editorSubmit">确 定</el-button>
              </span>
            </el-dialog>

          </div>

        </div>
        <el-divider content-position="left"></el-divider>
        <div style="clear: both"></div>


        <!-- 修改密码 -->
        <div style="width: 30%;float: left;margin-left: 10%;">
          <h4 style="margin-bottom: 10px">修改密码</h4>
      <el-form :rules="passwordRules" ref="updatePasswordForm">
        <el-form-item label="旧密码:">
          <div style="display: flex; align-items: center; margin-bottom: 10px">
            <el-input type="password" v-model="oldPassword" style="max-width: 200px;margin-left: 10px"></el-input>
          </div>
        </el-form-item>
        <el-form-item label="新密码:"prop="newPassword">
          <div style="display: flex; align-items: center; margin-bottom: 10px">
            <el-input type="password"  v-model="newPassword" style="max-width: 200px;margin-left: 10px"></el-input>
          </div>
        </el-form-item>
        <el-form-item label="确认密码:">
          <div style="display: flex; align-items: center;">
            <el-input type="password" v-model="confirmPassword" style="max-width: 200px"></el-input>
          </div>
        </el-form-item>
      </el-form>



          <el-button type="primary" style="margin-top: 20px" @click="updatePassword">确认修改</el-button>
        </div>
<!--        右边另一半-->
        <div style="width: 30%;float: left;margin-left: 10%;background-size: 4px 20px, 20px 4px, 4px 20px, 20px 4px;
        border: 1px solid #073F97;">
          <el-collapse v-model="activeName" accordion>
            <el-collapse-item title="查看队伍邀请" name="1">
              <div>功能：查看队伍邀请可以查看有哪个队伍发送邀请给本人</div>
              <div><el-link type="primary">队伍邀请</el-link></div>
            </el-collapse-item>
            <el-collapse-item title="查看自己所在队伍" name="2">
              <div>功能：查看自己所在的队伍所在</div>
              <div><el-link type="success">查看队伍</el-link>。</div>
            </el-collapse-item>
            <el-collapse-item title="查看自己获奖" name="3">
              <div>功能：查看自己获得的所有奖项</div>
              <div> <el-link type="primary">查看获奖</el-link>；</div>
            </el-collapse-item>
            <el-collapse-item title="查看申请情况" name="4">
              <div>功能：查看自己发布的申请通过情况</div>
              <div> <el-link type="success">查看申请</el-link></div>
            </el-collapse-item>
          </el-collapse>


        </div>

      </div>


</template>
<script>
export const user = {}
export default {
  name: "Person",
  data() {
    return {
      rules: {
        college: [
          { required: true, message: '请输入正确的学院', trigger: 'blur' },
          { min: 5, max: 12, message: '长度在 5 到 12 个字符', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '请输入名字', trigger: 'blur' },
          { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
        ],
        gender: [
          { required:true,message:'请选择性别',trigger:'change'},
        ],
        phone: [
          {required:true,message:'请输入电话号码',trigger:'blur'},
          {pattern: /^1[3456789]\d{9}$/, message: '电话号码格式不正确', trigger: 'blur' },
          { max: 11, min: 11, message: '电话号码长度必须为11位', trigger: 'blur' }
        ],
        email:[
          {required:true,message:'请输入电子邮箱',trigger:'blur'},
          {type:'email',message:'请输入正确邮箱格式',trigger:'blur'},
        ],
        major:[
          {required:true,message:'请输入专业',trigger:'blur'},
        ],
        className:[
          {required:true,message:'请输入班级',trigger:'blur'},
        ],



      },
      passwordRules:{
        newPassword:[
          { pattern: /^[A-Za-z0-9_]+$/, message: '密码只能由数字、字母、下划线组成', trigger: 'change' },
          { min: 5, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' },
        ]
      },

      isdisabled:false,
      activeName: '1',
      imageUrl: '',//头像的url
      dialogVisible: false,

      editor:false,
      originalUser:{},
      user: {
        usersRole:"",
        userId: "",
        password:"",
        college: "",
        name: "",
        gender: "",
        phone: "",
        email: "",
        major:"",
        className:"",
      },
      oldPassword: "",
      newPassword: "",
      confirmPassword: "",
    };
  },
  created() {
    // 请求获取用户信息
    this.getUserInfo();
  },
  methods: {
    // 编辑的打开
    editorOpen(){
      this.originalUser = Object.assign({},this.user);
      this.editor = true;
    },

    // 编辑框的处理
    editorClose(){
      if (this.UserDateChange()){
        this.$confirm('您有未保存的数据，是否要保存？', '提示', {
          confirmButtonText: '保存',
          cancelButtonText: '放弃',
          type: 'warning'
        }).then(() => {
          this.editorSubmit();
          if (typeof done === 'function') {
            done();
          } else {
            this.editor = false;
          }
        }).catch(() => {
          this.editorRollback();
          if (typeof done === 'function') {
            done();
          } else {
            this.editor = false;
          }
        });
      } else {
        if (typeof done === 'function') {
          done();
        } else {
          this.editor = false;
        }
      }
    },
    handleCancel() {
      // 取消编辑，将数据回滚到最初的状态
      this.editorRollback();
      this.editor = false;
    },

   editorRollback() {
     this.user = Object.assign({}, this.originalUser);
     this.editor=false;
    },

    editorSubmit() {
      // 保存数据
      this.$refs.personForm.validate((valid) => {
        if (valid) {   // 发送请求保存数据
          this.request.post("/Users/editorSave",this.user)
          .then(res=>{
            if (res.code==='200'){
              this.$message.success("修改成功")
              this.editor = false;
            }
          })

        } else {
          this.$message.error('请检查输入信息！');
          return false;
        }
      });

    },
    UserDateChange(){
      return JSON.stringify(this.user) !== JSON.stringify(this.originalUser);

    },
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
    },
    //头像上传定义
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },




    // 获取用户信息
    getUserInfo() {
      this.request
          .get("/Users/getAll")
          .then((res) => {
            if (res!=null){
              this.user = res;
              if (this.user.gender==='男') {
                this.user.gender = 'male';
              }else if (this.user.gender==='女'){
                this.user.gender='female';
              }
            }
            if (res.name==null){
           this.$message.warning("您没有编辑信息，请编辑信息！")
            }
            })
          .catch((err) => {
            this.$message.error("系统错误");
          });
    },
    // 修改密码
    updatePassword() {
      if (this.newPassword !== this.confirmPassword) {
        this.$message.error("两次输入的密码不一致");
        return;
      }
      this.request
          .post("/Users/updatePassword", {
            oldPassword: this.oldPassword,
            newPassword: this.newPassword,
          })
          .then((res) => {
            if (res.code === '200') {
              this.$message.success("密码修改成功！");
              this.oldPassword = "";
              this.newPassword = "";
              this.confirmPassword = "";
              this.$message.success("请重新登录!")
              this.$router.push("/login")
              localStorage.removeItem("user")


            } else {
              this.$message.error(res.msg);
            }
          })
          .catch((err) => {
            this.$message.error("密码修改失败，稍后重试")
          });
    }
  }
}
</script>

<style>
.el-avatar {
  display: block;
  margin: 0 auto;
}

 .avatar-uploader .el-upload {
   border: 1px dashed #d9d9d9;
   border-radius: 6px;
   cursor: pointer;
   position: relative;
   overflow: hidden;
 }
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

</style>




